/*global*/
html { overflow:hidden}
body { overflow:hidden; margin:0; padding:0; font-size:10px; font-family:Tahoma}
.ruler { position:absolute; left:0; top:10px; padding-left:70px; height:60px; z-index:5; overflow:hidden}

/*scale*/
.ruler span { display:inline-block; vertical-align:bottom; width:1px; height:12px}
div { white-space:nowrap}
.ruler .pre { margin-bottom:36px} 
.ruler .pre span { vertical-align:top} 
.ruler .l, .ruler .m, .ruler .s { background:#000} 
.ruler .l { height:12px} 
.ruler .m { height:8px} 
.ruler .s { height:5px}

/*mark*/
.middle { position:absolute; left:20px; top:21px; height:15px; width:100%; z-index:5}
.middle b { display:inline-block; background:transparent; width:100px; text-align:center; font-size:12px; color:#fff; font-weight:700}

/*guide*/
.guide { position:absolute; left:-100px; top:0; display:inline-block; text-align:center; border-left:1px dashed #333; height:80px}
.guide i { display:inline-block; position:absolute; top:30px; height:10px; line-height:10px; opacity:.6; background-color:#fff; border:1px solid #333; padding:2px 4px; font-size:14px; font-style:normal; color:#000; z-index:20}

/*canvas shape*/
canvas { position:absolute; top:0; left:0; overflow:hidden; z-index:1}

/*operate*/
.operate { position:absolute; height:40px; width:40px; top:20px; left:20px; z-index:10}
.operate i { display:block; float:left; width:16px; cursor:pointer; height:16px; margin:2px; background:url(operate_icon.png) no-repeat 0 0}
.operate .o-close { background-position:-19px 0}
.operate .o-dir { background-position:-57px 0}
.operate .o-change { background-position:-38px 0}
.operate .o-max { background-position:-77px 0;}

/*change color*/
.color { position:absolute; left:70px; top:25px; font-size:12px; padding:5px; background-color:#fff; opacity:.8; font-weight:700; z-index:50; display:none}

/*vertical mode*/
.ver .ruler { width:60px; height:1000px; left:10px; top:0; padding:70px 10px 0 0;}
.ver .ruler span { display:block; width:10px; height:1px}
.ver .ruler .pre { float:left}
.ver .ruler .next { float:right}
.ver .ruler .l { width:12px}
.ver .ruler .m { width:8px}
.ver .ruler .s { width:5px}
.ver .ruler .next .m { margin-left:4px}
.ver .ruler .next .s { margin-left:7px}
.ver .ruler .middle { left:-4px; top:62px; text-align:center}
.ver .ruler .middle b { display:block; width:auto; height:100px; vertical-align:middle}
.ver .ruler .operate { padding:2px 5px}
.ver .guide { display:block; height:0; left:0; top:-100px; width:70px; padding-left:10px; border-left:0; border-top:1px dashed #333}
.ver .guide i { top:-10px; left:-5px; position:relative; margin:0 auto}
.ver .color { left:5px; top:60px; white-space:normal}
.ver .color button, .ver .color input { display:block; margin-top:5px}

